/* Imported Fonts
===========================================
*/

@font-face
{
     src: url(../fonts/Raleway-Regular.ttf);
     font-family: Raleway;
     font-weight: normal;
     font-style: normal;
}
@font-face
{
     src: url(../fonts/Raleway-Bold.ttf);
     font-family: Raleway;
     font-weight: bolder;  
     font-style: normal;
}

@font-face
{
     src: url(../fonts/Raleway-SemiBold.ttf);
     font-family: Raleway;
     font-weight: bold;  
     font-style: normal;
}

@font-face
{
     src: url(../fonts/Raleway-RegularItalic.ttf);
     font-family: Raleway;
     font-weight: normal;  
     font-style: italic;
}

@font-face
{
     src: url(../fonts/Raleway-BoldItalic.ttf);
     font-family: Raleway;
     font-weight: bold;  
     font-style: italic;
}

@font-face
{
     src: url(../fonts/Raleway-Light.ttf);
     font-family: Raleway;
     font-weight: lighter;  
     font-style: normal;
}


/* Global Webpage Settings
===========================================
*/

*
{
     box-sizing: border-box;
     transition-duration: 500ms;
}

html
{
     height:100%;
     min-height:100%;
}

body
{
     position: absolute;
     height: 100%; /* this is the key! */
     width: 100%;
     margin: 0;
     padding: 0;
     background-color: rgba(255, 255, 255, 0);
     /*background-image: url('graphics/page-background.jpg');
     background-repeat: repeat-x;*/
     font-family: Raleway, IBM Plex Sans, Open Sans, Arial;
}

img 
{
     max-width: 100%;
     height: auto;
}

.container 
{   
}


/* Header Section of Webpage
===========================================
*/

.scroll_to_placeholder
{
     margin: 0;
     padding: 0;
}

.top_menu
{
     /*display: none;*/
     height: 40px;
     width: 100%; 
     background-color: rgba(42,82,190,1);
     text-align: center;
     z-index: 999;
}

.top_menu_sticky
{
     display: inline-block;
     position: fixed;
     top: 0;
     left: 0;
}

.top_menu_left
{
     position: absolute;
     top: 40%;
     height: 43px;
     width: 43%;
     margin: 0;
     padding:.25em;
     padding-right: 7%;
     /*background-color: aqua;*/
     color: rgba(153,0,0,1);
     text-align: right;
     border-top: 2px solid rgba(153,0,0,1);
     border-bottom: 2px solid rgba(153,0,0,1);
}

.top_menu_right
{
     position: absolute;
     top: 40%;
     right: 0;
     height: 43px;
     width: 43%;
     margin: 0;
     padding:.25em;
     padding-left: 7%;
     /*background-color: plum;*/
     color: rgba(102,0,0,1);
     text-align: left;
     border-top: 2px solid rgba(153,0,0,1);
     border-bottom: 2px solid rgba(153,0,0,1);
}

.header
{
     position: relative;
     height: 200px;
     width: 100%;
     /*background: lightgoldenrodyellow;*/
     margin: 0;
}

.masthead_image
{
     position: relative;
     top: 12%;
     height: 150px;
     width: 355px;
     /*background-color: yellowgreen;*/
     background-color: rgba(255,255,255,1);
     background-image: url(../images/mda_masthead_450px.png);
     background-repeat: no-repeat;
     margin: 0 auto;
     text-align: center;
     border: 2px solid rgba(153,0,0,1);
     z-index: 55;
}


/* Content Section of Webpage
===========================================
*/

/*--Page Image Container--*/

.initial_image_container
{
    position: fixed;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

/*--Display Welcome Image--*/

.welcome_image 
{
     position: relative;
     height: 58vh;
     /*background-color: lightskyblue;*/
     /*background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../images/parts_3000px.jpg);*/
     /*background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../images/Computer_Sales_1_3000px.jpg);*/
     /*background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../images/Computer-repair-WordPress-website-design-SEO-banner_3000px.jpg);*/
     /*background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../images/laptoprepair.jpg);*/
     /*background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../images/rack_drives_3000px.jpg);*/
     background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(../images/3840x2160-Verrazano-Narrows-Bridge.jpg);
     background-attachment: fixed;
     background-size: cover !important;
     background-position: center 0;
     background-repeat: no-repeat;
     /*padding: 10em 0;*/
     text-align: center;
}

.td_masthead
{
     width: 100%;
     height: 100%;
     margin: auto;
     background: url(../images/mda_masthead_450px.png);
     background-size: 30vw;
     background-position: center center;
     background-repeat: no-repeat;

}

/*--POSSIBLE MOVE TO NAVIGATION--*/
.down_circle
{
     position: absolute;
     left: 0;
     right: 0;
     bottom: -10px;
     /*background-color: rgba(255, 255, 255, 1);
     padding: 1em;
     border: solid 1px rgba(255, 255, 255, 1);
     box-shadow: 1px 3px rgb(146, 146, 146);
     border-radius: 50%;*/
}

.down_circle a
{
     position: relative;
     text-decoration: none;
     background-color: rgba(255, 255, 255, 1);
     padding: 1em;
     border: solid 1px rgba(255, 255, 255, 1);
     box-shadow: 1px 3px rgb(146, 146, 146);
     border-radius: 50%;
     color: rgba(0, 0, 0, 1);
}

.down_circle a:hover
{
     background-color: rgba(0,0,0,0.5);
     border: 0px;
     box-shadow: 0px;
     color: rgba(255, 255, 255, 1);
}

.welcome_image_text
{
     position: relative;
     margin: 0;
     color: rgba(240, 240, 240, 1);
     text-shadow: 1.5px 1.5px rgba(0, 0, 0, 1);
     z-index: 55;
}


/*--Display Services Image--*/

.services_image_upper_container
{
     position: relative; 
     background-color: transparent;
}

.services_image 
{
     position: relative;
     /*background-color: lightskyblue;*/
     /*background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../images/service_blue_key_3000px.jpg);*/
     background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(../images/AccountingTipsForNewBusinesses.jpg);
     background-size: cover;
     background-position: center 100%;
     background-repeat: no-repeat;
     background-attachment: fixed;
     /*padding: 10em 0;*/
     height: 52vh;
     text-align: center;
}

.services_list_container
{
     position: relative;
     text-align: center;
     background-color: rgb(230, 230, 230);
}

.services_item_list
{
     display: inline-block;
     margin: 0;
     padding: 0;
     text-align: left;
     line-height: 1.5em;
}

.services_item_list_spacer
{
     width: 2em;
}

/*--Display Contact Us Image--*/

.contact_us_image_upper_container
{
     position: relative; 
}

.contact_us_image 
{
     position: relative;
     /*background-color: lightskyblue;*/
     background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(../images/5bc11394-e980-45f5-9322-6684d8b0b5a5.jpg);
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-attachment: fixed;
     height: 52vh;
     text-align: center;
}

/*--Adjust padding based on screen width--*/

@media (max-width: 1440px)
{
     .td_masthead
     {
         /*background-size: 35%;*/
         background-size: 35vw;
     }
}

@media (max-width: 1200px)
{
     .top_menu_left
     {
          display: none;
     }

     .top_menu_right
     {
          display: none;
     }
     
     .top_menu
     {
          position: fixed;
          top: 0;
          left: 0;
          display: inline;
     }

     .header
     {
          margin: 40px 0 0 0;
     }

     .td_masthead
     {
          margin-top: 15px;
          /*background-size: 35%;*/
          background-size: 40vw;
     }

     .services_item_list_spacer
     {
     width:1.25em;
     }
}

@media (max-width: 1080px)
{
     .td_masthead
     {
          background-size: 45vw;
     }
}

@media (max-width: 900px)
{
     .welcome_image
     {
          height: 52vh;
     }

     .services_image,
     .contact_us_image
     {
          height: 46vh;
     }

     .services_item_list
     {
          display: block;
          text-align: left;
     }

     .services_item_list_spacer
     {
          display: none;
     }
}

@media (max-width: 600px)
{
     .td_masthead
     {
          background-size: 65vw;
     }
}


/* Footer Section of Webpage
===========================================
*/

.pagefooter
{
     position: relative;
	height: 65px;
     width: 100%;
     text-align: center;      
     margin-left: auto;
     margin-right: auto;
     font-size: 9pt;
     border-top: 0px Solid var(--tint_blk);
     border-bottom: 0px Solid rgba(0,0,0,0);
     color: rgba(255, 255, 255, 1);
     background-color: rgba(42,82,190,1);    
        /*background-image: url('../graphics/footer-background.jpg');
        background-repeat: repeat-x;*/
}


/*Navigation 
===========================================
*/

nav ul
{
     margin: 0;
     padding: 0;
     list-style: none;
}

nav li
{
     display: inline-block;
}

nav a 
{
     text-decoration: none;
     text-transform: uppercase;
     font-size: .90rem;
     font-weight: bold;
     padding: .70em;
     padding-left: 1em;
     padding-right: 1em;
     color: rgba(255,255,255,1);
}

.header_menu_text_link
{
     color: rgba(102,0,0,1); 
}

nav a:hover
{
     background-color: rgba(0,0,0,0.5);
     border-bottom: 2px solid rgba(0,0,0,0.1);
}

nav .active a
{
     background-color: rgba(0,0,0,0.5);
     border-bottom: 2px solid red;
}

.main_menu
{
     position: relative;
     display: inline-block;
     padding: 4.5px 0 0 0;
}

.footer_menu
{
     padding: 6px 0;
}

@media (max-width: 600px)
{
     nav a 
     {
          font-size: .75rem;
          padding: .95em;
          padding-left: .5em;
          padding-right: .5em;
     }

     .main_menu
     {
     padding: 4.5px 0;
     }
}


/* Typography
===========================================
*/

.heading_text
{
     font-size: 2.25rem;
     font-weight: 600;
}

.heading_text span
{
     display: inline-flex;
}

.general_text
{
     margin: 0 10% 0 10%;
     font-size: 1.4rem;
     font-weight: normal;
     line-height: 1.5em;
     padding: 2em 0 2em 0;
}

.services_list_container
{
     padding: 4em 0 4em 0;
}

.services_item_list
{
     font-size: 1.4rem;
}

.contact_us_text
{
     padding: 1em 0 1em 0;
}

/*--Adjust padding based on screen width--*/
@media (max-width: 1200px)
{
     .heading_text
     {
          font-size: 1.85rem;
          font-weight: bold;
     }

     .general_text
     {
          font-size: 1.2rem;
     }

     .services_list_container
     {
     padding: 2em 0 2em 0;
     }

     .contact_us_text
     {
          padding: 2em 0 2em 0;
     }

     .services_item_list
     {
          font-size: 1.2rem;
     }
}


@media (max-width: 900px)
{
     .heading_text
     {
          font-size: 1.75rem;
          font-weight: bold;
     }

     .general_text
     {
          margin: 0 7.5% 0 7.5%;
          padding: 1em 0 1em 0;
     }

     .services_item_list
     {
          padding: 0 15% 0 15%;
     }

     .contact_us_text
     {
          padding: 0;
     }

}

@media (max-width: 600px)
{
     .heading_text
     {
          font-size: 1.3rem;
          font-weight: bold;
     }

     .general_text
     {
          margin: 0 5% 0 5%;
          padding: .5em 0 .5em 0;
     }

     .services_list_container
     {
     padding: 1em 0 1em 0;
     }

     .services_item_list
     {
          padding: 0 5% 0 5%;
     }
}